<template>
    <Echarts class="e-charts" :options="options" />
</template>

<script>
import Echarts from "../../../../../component/ECharts";
export default {
    name: "EchartsBar",
    components: {
        Echarts,
    },
    props: {
        reciveData: {
            type: Array,
        },
    },
    computed: {
        options() {
            return {
                // color: ["#CC2B33", "#CB6219", "#CACD2C", "#51C8D1"].reverse(),
                grid: {
                    left: 20,
                    top: 20,
                    right: 0,
                    bottom: 20,
                    borderColor: "red",
                },

                // legend: {
                //     data: ['car', 'person', 'person1', 'person2'],
                //     right: 5,
                //     top: 5,
                //     textStyle: {
                //         color: "#fff",
                //         fontSize: 14,
                //     },
                //     formatter: (name) => {
                //         return dict[name];
                //     }
                // },
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: ''
                //     }
                // },
                tooltip: false,
                xAxis: [
                    {
                        type: "category",
                        axisTick: { show: false },
                        data: this.reciveData.map((d) => d.name),
                        axisLabel: {
                            fontSize: 10,
                            color: "#c1c3ca",
                        },
                        axisLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#C1C3CA", //左边线的颜色
                                // width:'2'//坐标线的宽度
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            fontSize: 10,
                            color: "#c1c3ca",
                        },
                        splitLine: {
                            lineStyle: {
                                color: ["#6E6E6E"],
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#C1C3CA", //左边线的颜色
                                // width:'2'//坐标线的宽度
                            },
                        },
                    },
                ],
                textStyle: {
                    color: "#fff",
                },
                series: [
                    {
                        name: "shadow",
                        type: "bar",
                        // itemStyle: {
                        //     color: "rgba(0,0,0,0.05)",
                        // },
                        animation: false,
                        barWidth: 10,
                        data: this.reciveData.map((dt) => dt["car"] * 1.8),
                        itemStyle: {
                            // normal: {
                            borderRadius: 20,
                            color: "rgb(9,30,61,0.7)",
                            // },
                        },
                    },
                    {
                        name: "car",
                        type: "bar",
                        // barGap: 0,
                        barWidth: 10,
                        barGap: "-100%",
                        barCategoryGap: "40%",
                        data: this.reciveData.map((dt) => dt["car"]),
                        itemStyle: {
                            // normal: {
                            borderRadius: 20,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#05FDFA",
                                    },
                                    {
                                        offset: 1,
                                        color: "#054B96",
                                    },
                                ],
                            },
                            // },
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style>
.e-charts {
    width: 100%;
    height: 100%;
    /* margin-top: 10px; */
}
</style>
